<template>
  <div class="transferAccount">
   <div class="navFixed headerBox">
     <van-nav-bar
        class="navStyle1"
        title="导出私钥"
        left-arrow
        @click-left="goBack"
      ></van-nav-bar>
   </div>
    <p class="txt1">钱包名称</p>
    <p class="txt2">{{walletSelect.walletName}}</p>
    <div class="erCode">
      <div id="qrcode" ref="qrcode"></div> 
    </div>
    <div class="address">
      <span class="txt3">{{walletSelect.walletSecretKey}}</span>
      <span class="txt4" id="copyTxt" @click="copyUrl" :data-clipboard-text="walletSelect.walletAddr">复制</span>
    </div>
    <div class="tip">安全提示：私钥导出后请妥善保管，不要泄露，一旦泄露，可能导致资产损失。拥有私钥就完全拥有所有资产，私钥导出后请谨慎保管。</div>
  </div>
</template>

<script>
import {Encrypt,Decrypt} from '@/utils/AES.utils.js'
import QRCode from "qrcodejs2"; 
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      walletSelect:{},
    }
  },
  created(){
    this.walletSelect=JSON.parse(decodeURIComponent(this.$route.query.info))
    this.walletSelect.walletSecretKey = Decrypt(this.walletSelect.walletSecretKey)
  },
  mounted(){
    this.qrcode()
  },
  methods:{
    qrcode () {
      let qrcode = new QRCode("qrcode", {
        width: 180,
        height: 180,
        text: this.walletSelect.walletSecretKey
      });
    },
    goBack(){
      this.$router.go(-1)
    },
    submit(){

    },
    // 复制
    copyUrl () {
      let self = this
      var clipboard = new Clipboard('#copyTxt')
      clipboard.on('success', e => {
        self.$toast('复制成功')
      })
    },
  }
};
</script>
<style scoped>
.headerBox{
  background: transparent;
}
.transferAccount{
  height: 100vh;
  text-align: center;
  color: #FFF;
  background: url('../../assets/img/wallet/moon-1@3x.png') no-repeat center bottom;
  background-size: cover;
  overflow: hidden;
}
.navFixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.bgImg{
  width: 100%;
}
.txt1{
  font-size: 0.29rem;
  color: #C8CEDA;
  margin-top: 1.3rem;
  margin-bottom: 0.3rem;
}
.txt2{
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
}
.erCode{
  display: inline-block;
  background: #F4F4F4;
  border-radius: 0.32rem;
  margin: 0 auto;
  margin-bottom: 0.6rem;
  padding: 0.2rem;
}
.address{
  margin: 0 1.24rem;
  line-height: 0.48rem;
}
.txt3{
  font-size: 0.29rem;
  word-break: break-all;
  margin-right: 0.2rem;
}
.txt4{
  display: inline-block;
  font-size: 0.29rem;
  color: #F6741F;
}
.tip{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0.48rem;
  background: #F30F0F;
  padding: 0.28rem;
  text-align: left;
  font-size: 0.3rem;
}
</style>
